<template>
    <div class="department-detail-page">
        <!-- 顶部导航 -->
        <page-header :title="department.name" />

        <div class="page-content">
            <!-- 科室介绍 -->
            <div class="department-info">
                <div class="section-title">科室介绍</div>
                <div class="info-content">
                    <p>{{ department.description || '暂无科室介绍' }}</p>
                </div>
            </div>

            <!-- 科室医生 -->
            <div class="department-doctors">
                <div class="section-header">
                    <div class="section-title">科室医生</div>
                    <div class="view-all" @click="onViewAll">查看全部 &gt;</div>
                </div>

                <div class="doctor-list">
                    <div v-for="doctor in doctors" :key="doctor.id" class="doctor-item"
                        @click="onDoctorClick(doctor.id)">
                        <img :src="doctor.avatar || '/images/doctor-default.jpg'" class="doctor-avatar" />
                        <div class="doctor-info">
                            <div class="doctor-name">{{ doctor.name }}</div>
                            <div class="doctor-title">{{ doctor.title }}</div>
                            <div class="doctor-speciality">
                                <span>擅长：{{ doctor.speciality }}</span>
                            </div>
                        </div>
                        <van-button size="small" type="primary" class="booking-btn">挂号</van-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PageHeader from '@/components/common/PageHeader.vue'

const route = useRoute()
const router = useRouter()
const hospitalId = Number(route.params.id)
const departmentId = Number(route.params.deptId)

// 模拟科室数据
const department = ref({
    id: departmentId,
    name: '心内科',
    description: '心内科是心血管内科的简称，主要诊治冠心病、心绞痛、心肌梗死、高血压、心律失常、风湿性心脏病、心肌病等心脏疾病，以及主动脉和外周血管的疾病。配备有先进的诊疗设备，包括心电图、超声心动图、动态心电图、动态血压监测仪等。'
})

// 模拟医生数据
const doctors = ref([
    {
        id: 1,
        name: '张医生',
        avatar: '/images/doctor1.jpg',
        title: '主任医师',
        speciality: '冠心病、心肌梗死、心律失常'
    },
    {
        id: 2,
        name: '李医生',
        avatar: '/images/doctor2.jpg',
        title: '副主任医师',
        speciality: '高血压、心力衰竭、先天性心脏病'
    },
    {
        id: 3,
        name: '王医生',
        avatar: '/images/doctor3.jpg',
        title: '主治医师',
        speciality: '心脏介入治疗、冠心病、心肌病'
    }
])

const onViewAll = () => {
    router.push(`/hospital/${hospitalId}/doctors?departmentId=${departmentId}`)
}

const onDoctorClick = (doctorId: number) => {
    router.push(`/hospital/${hospitalId}/doctor/${doctorId}`)
}

onMounted(() => {
    // 在实际应用中，这里应该根据 hospitalId 和 departmentId 从API获取数据
    console.log(`加载医院ID: ${hospitalId}, 科室ID: ${departmentId}`)
})
</script>

<style scoped lang="scss">
.department-detail-page {
    min-height: 100vh;
    background: #f5f5f5;
    padding-top: 46px; // 为顶部导航栏预留空间

    .page-content {
        padding-bottom: 16px;
    }

    .department-info {
        background: #fff;
        padding: 16px;
        margin-bottom: 8px;

        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 12px;
        }

        .info-content {
            font-size: 14px;
            color: #666;
            line-height: 1.6;

            p {
                margin: 0;
            }
        }
    }

    .department-doctors {
        background: #fff;
        padding: 16px;

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .section-title {
                font-size: 16px;
                font-weight: 500;
                color: #333;
            }

            .view-all {
                font-size: 12px;
                color: #888;
            }
        }

        .doctor-list {
            .doctor-item {
                display: flex;
                align-items: center;
                padding: 12px 0;
                border-bottom: 1px solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .doctor-avatar {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    margin-right: 12px;
                }

                .doctor-info {
                    flex: 1;

                    .doctor-name {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 4px;
                    }

                    .doctor-title {
                        font-size: 14px;
                        color: #666;
                        margin-bottom: 4px;
                    }

                    .doctor-speciality {
                        font-size: 12px;
                        color: #999;

                        span {
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }

                .booking-btn {
                    flex-shrink: 0;
                }
            }
        }
    }
}
</style>